<template>
   <div class="lietou">
     <ul ref="infinitebox"  class="infinite-list" infinite-scroll-distance="10" v-infinite-scroll="load" style="overflow:auto">
    <li ref="infinite" v-for="(item,key) in datas" :key="key" class="infinite-list-item">
      <h2>&nbsp;{{item.positionName}}</h2>
      <div class="lylt">
          <span>{{item.degree}}</span>
          <span>{{item.experience}}</span>
          <span>{{item.titleCode}}</span>
      </div>
        <div class="lismessagetop">
                <div class="lismessagetopImg">
                    <img src="../../assets/img/img23.png" alt="">
                </div>
                  <span>{{item.companyName}}</span>
                    <span style="float:right">{{item.salaryName}}</span>
        </div>
    </li>
  </ul>
   <div v-if="flag" class="daodile">
          加载中...
        </div>
   </div>
</template>

<script>
export default {
 data () {
      return {
        count: 0,
        datas:[],
        flag:false
      }
    },
    methods: {
      load () {
        this.count += 1
      }
    },
    created:async function(){
        let {data} = await this.$http.get("/loginapi/getlingyue")
        this.datas=data
        // let num = 0
        // let shuliang = 0
        // this.$nextTick(()=>{
        //   this.$refs.infinite.forEach((ele) => {
        //    num += ele.offsetHeight
        //    shuliang++
        //   });
        //   let infinitebox = this.$refs.infinitebox.offsetHeight
        //  setInterval(() => {
        //    if(((num-this.$refs.infinitebox.scrollTop+((shuliang*15)/2)-infinitebox))<10){
        //     // console.log('到底了');
        //     this.flag=true
        //   }
        //   // console.log(num);
        //   // console.log(this.$refs.infinitebox.scrollTop);
        //   // console.log(infinitebox);
        //  }, 3000);
         
        // })
       
       //10 550  775  1250   15 550 1438/1325 1875 
       //
       //125 
          
        
      
    },
    
  }
</script>

<style scoped>
.daodile{
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  font-size: .3rem;
  background-color: #494949;
}
.infinite-list{
    height: 11rem;
    background-color: #f5f5f5;
}
.infinite-list-item{
    height: 2.5rem;
    width: 100%;
    margin-bottom: .15rem;
    padding: .3rem;
    background-color: white;
    position: relative;
    overflow: hidden;
}
h2{
    font-size: .3rem;
    color: black;
    font-weight: 700;
}
.lylt{
    font-size: .25rem;
    color: #666;
     margin-bottom:.28rem ;
}
.lylt>span{
    margin-right:.28rem ;
}
.lismessagetop{
    width: 90%;
    font-size: .25rem;
    line-height: .65rem;
}
.lismessagetopImg{
    height: .65rem;
    width: .65rem;
    margin-right: .26rem;
    float: left;
}
.lismessagetopImg>img{
    display: inline-block;
    width: .65rem;
    height: .65rem;
    
}
</style>